<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="./css/css_be/index.css">
    <link rel="stylesheet" href="./dist/package/css/swiper.min.css">
</head>

<body>
    <!-- 导航标签页 -->
    <header class="dh">
        <!-- 第一导航页 -->
        <div class="top-nav">
            <div class="enter-warp">
                <nav class="nav1">
                    <ul>
                        <li><a href="./images/images_be/wyyyy.png"></a></li>
                        <li>发现音乐</li>
                        <li>我的音乐</li>
                        <li>关注</li>
                        <li>商城</li>
                        <li>音乐人</li>
                        <li>云推歌</li>
                        <li>下载客户端</li>
                        <li>搜索</li>
                        <li>创作者中心</li>
                        <li>头像</li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- 第二导航页 -->
        <div class="secd-nav">
            <div class="center-warp">
                <nav class="nav2">
                    <ul>
                        <li>推荐</li>
                        <li>排行榜</li>
                        <li>歌单</li>
                        <li>主播电台</li>
                        <li>歌手</li>
                        <li>新碟上架</li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!-- 轮播图 -->
    <section class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./images/images_be/1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/4.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/5.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/6.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/7.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/8.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/9.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/images_be/10.jpg" alt="">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>
    <script src="../dist/package/js/swiper.min.js"></script>
    <script src="./js/js_be/index.js"></script>

    <!-- 页面内容 -->
    <section class="total">
        <div class="column" id="left">
            <!-- 热门推荐 -->
            <section class="rmtj">
                <div class="enter-warp">
                    <div class="dh">
                        <div class="dot"></div>
                        <h2>热门推荐</h2>
                        <ul class="clearfix">
                            <li><a href="">华语</a></li>
                            <li><a href="">流行</a></li>
                            <li><a href="">摇滚</a></li>
                            <li><a href="">民谣</a></li>
                            <li><a href="">电子</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                    <ul class="clearfix">
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-1.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                那人那景都将在遗忘中重新拾起
                            </div>
                        </li>
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-2.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                超火的rap|一定要听的顶级说唱
                            </div>
                        </li>
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-3.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                开口沉醉 · 慵懒迷幻的欧美女声
                            </div>
                        </li>
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-4.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                那人那景都将在遗忘中重新拾起
                            </div>
                        </li>
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-5.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                那人那景都将在遗忘中重新拾起
                            </div>
                        </li>
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-6.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                那人那景都将在遗忘中重新拾起
                            </div>
                        </li>
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-7.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                那人那景都将在遗忘中重新拾起
                            </div>
                        </li>
                        <li class="pro-grid">
                            <div class="picbox">
                                <img src="./images/images_be/1-8.jpg" alt="">
                            </div>
                            <div class="wordbox">
                                那人那景都将在遗忘中重新拾起
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 新碟上架 -->
            <section class="xdsj">
                <div class="enter-warp">
                    <div class="dh clearfix">
                        新碟上架
                    </div>
                    <ul>

                    </ul>
                </div>
            </section>
            <!-- 榜单 -->
            <section class="bd">
                <div class="enter-warp">
                    <div class="dh clearfix">
                        榜单
                    </div>
                    <ul>

                    </ul>
                </div>
            </section>
        </div>
        <div class="column" id="right">
            <!-- 入驻歌手 -->
            <section class="rzgs">
                <div class="enter-warp">
                    <div class="dh clearfix">
                        入驻歌手
                    </div>
                    <ul>

                    </ul>
                </div>
            </section>
            <!-- 热门主播 -->
            <section class="rmzb">
                <div class="enter-warp">
                    <div class="dh clearfix">
                        热门主播
                    </div>
                    <ul>

                    </ul>
                </div>
            </section>
        </div>

    </section>


    <!-- 页脚 -->
    <section class="yj">
        <div class="enter-warp">
            <div class="part1">
                页脚
            </div>
            <div class="part2">

            </div>
        </div>
    </section>
</body>

</html>